<template>
  <div
    v-loading="loading"
    element-loading-text="正在查找.."
    element-loading-spinner="el-icon-loading"
  >
    <div class="head-bg"><el-image :src="headBg" fit="cover"></el-image></div>
    <div class="content-container">
      <div class="content">
        <div class="search-container">
          <div class="search-box">
            <el-input placeholder="请输入内容" v-model="queryParams.title">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <span class="search-btn" slot="append" @click.stop="getList"
                >搜索</span
              >
            </el-input>
          </div>
          <el-button
            :disabled="isCanReset"
            type="primary"
            class="ml-4"
            @click="resetSearch"
          >
            重置搜索
          </el-button>
        </div>

        <DashLine />
        <div class="screen-container">
          <RouterSelectStrip
            :active-id.sync="queryParams.attributesId"
            :screenList="schoolPropertyList"
            label="院所属性"
            @itemClick="schoolItemClick"
          />
          <DashLine />
          <RouterSelectStrip
            :active-id.sync="queryParams.schoolId"
            :screenList="studyList"
            label="办学类型"
            @itemClick="studyItemClick"
          />
          <DashLine />
          <RouterSelectStrip
            :active-id.sync="queryParams.studyFieldId"
            :screenList="positionList"
            label="行业领域"
            @itemClick="positionItemClick"
          />
          <DashLine />
          <RouterSelectStrip
            listPropVName="dictLabel"
            :active-id.sync="queryParams.location"
            :screenList="addressList"
            label="所在地"
            @itemClick="addressItemClick"
          />
        </div>

        <div class="info-list">
          <div
            v-for="item in list"
            :key="item.id"
            class="item itemHover"
            @click="handleItemClick(item)"
          >
            <div class="left">
              <div class="img-box">
                <el-image fit="cover" :src="item.picture"></el-image>
              </div>
            </div>

            <div class="right">
              <div class="title">{{ item.title }}</div>
              <div class="sub">
                <span class="label">院所属性:</span>
                {{ calcAttributes(item.attributesId) }}
              </div>
              <div class="sub">
                <span class="label">研究领域:</span>
                {{ calcStudyField(item.studyFieldId) }}
              </div>
            </div>
          </div>
        </div>
        <div
          v-if="list.length <= 0"
          class="pb-8 m-auto text-xl text-center text-gray-500"
        >
          暂无数据
        </div>

        <pagination
          v-show="tableTotal > 0"
          :total="tableTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          :pageSizes="[12, 24, 36, 48]"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getProvinceList } from '@/api/getProvince'
import { requestTacademyList } from '@/api/schools.js'
import RouterSelectStrip from '@/components/HeadScreenStrip/RouterSelectStrip.vue'

export default {
  name: 'schools',
  components: {
    RouterSelectStrip,
  },
  data() {
    return {
      // 顶部背景图
      headBg: require('@/assets/page-head/school.png'),

      // 加载状态
      loading: false,

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 12,
        title: undefined,
        attributesId: undefined,
        schoolId: undefined,
        studyFieldId: undefined,
        location: undefined,
      },

      // 列表总条数
      tableTotal: 1,
      // 列表内容
      list: [],

      /* 搜索条件列表 */
      // 院所属性
      schoolPropertyList: [],
      // 办学类型
      studyList: [],
      // 行业领域
      positionList: [],
      // 所在地
      addressList: [],
      /* END */
    }
  },
  mounted() {
    /*
     * 获取当前session内的字典缓存
     * 先得到当前所需的字典的缓存，然后判断其是否存在。
     * 如果存在则直接放入变量内显示，否则置空
     * 此处处理用于下面判断是否请求接口获取字典数据
     */
    let schoolPropertyJson = sessionStorage.getItem(
      'institutes_institute_attribute'
    )
    let studyJson = sessionStorage.getItem('institutes_school_running_type')
    let positionJson = sessionStorage.getItem('user_common_field')

    this.schoolPropertyList =
      schoolPropertyJson && schoolPropertyJson != '{}'
        ? JSON.parse(schoolPropertyJson).data
        : []
    this.studyList =
      studyJson && studyJson != '{}' ? JSON.parse(studyJson).data : []
    this.positionList =
      positionJson && positionJson != '{}' ? JSON.parse(positionJson).data : []
    /* END */

    // 初始化
    this.init()
  },
  computed: {
    isCanReset() {
      let query = this.queryParams
      let { title, attributesId, schoolId, studyFieldId, location } = query
      return (
        !title &&
        !attributesId &&
        !schoolId &&
        !studyFieldId &&
        (!location || location === '全部')
      )
    },
    calcAttributes() {
      return (param) => {
        let res = this.schoolPropertyList.find((value) => {
          return value.dictValue == param
        })
        console.log('res----------->')
        console.log(res)
        return res && res.dictLabel
      }
    },
    calcStudyField() {
      return (param) => {
        let res = this.positionList.find((value) => {
          return value.dictValue == param
        })
        return res.dictLabel
      }
    },
  },
  methods: {
    // 初始化
    init() {
      // 获取字典
      this.getSearchList()
      // 获取所在地
      this.getProvinceList()
      // 获取列表
      this.getList()
    },

    // 获取搜索条件列表
    getSearchList() {
      // 获取院所属性
      if (!this.schoolPropertyList.length) {
        this.getDictList('institutes_institute_attribute').then((res) => {
          if (res.code == 200) {
            this.schoolPropertyList = res.data
          }
        })
      }

      // 获取办学类型
      if (!this.studyList.length) {
        this.getDictList('institutes_school_running_type').then((res) => {
          if (res.code == 200) {
            this.studyList = res.data
          }
        })
      }

      // 获取行业领域
      if (!this.positionList.length) {
        this.getDictList('user_common_field').then((res) => {
          if (res.code == 200) {
            this.positionList = res.data
          }
        })
      }
    },
    // 获取所在地
    getProvinceList() {
      // 获取所在地
      getProvinceList().then((res) => {
        if (res.code == 200) {
          let addressTypeList = res.data.map((item) => {
            let tempObj = item
            tempObj.dictValue = item.id
            tempObj.dictLabel = item.name
            return tempObj
          })
          this.addressList = addressTypeList
        }
      })
    },

    // 获取列表数据
    getList(isRest) {
      if (isRest === 1) {
        this.queryParams.pageNum = 1
      }
      this.loading = true
      let queryParams = {
        ...this.queryParams,
      }
      if (queryParams.location === '全部') {
        queryParams.location = undefined
      }
      requestTacademyList(queryParams).then((res) => {
        this.list = res.rows
        this.tableTotal = res.total
        this.loading = false
      })
    },
    resetSearch() {
      this.queryParams.title = undefined
      this.queryParams.attributesId = undefined
      this.queryParams.schoolId = undefined
      this.queryParams.studyFieldId = undefined
      this.queryParams.location = undefined

      this.getList(1)
    },
    /* 点击搜索条件后触发处理方法 */
    // 院所属性
    schoolItemClick(activeItem) {
      // this.queryParams.attributesId = activeItem.dictValue
      this.getList()
    },
    // 办学类型
    studyItemClick(activeItem) {
      // this.queryParams.schoolId = activeItem.dictValue
      this.getList()
    },
    // 行业领域
    positionItemClick(activeItem) {
      // this.queryParams.studyFieldId = activeItem.dictValue
      this.getList()
    },
    // 所在地
    addressItemClick(activeItem) {
      // this.queryParams.location = activeItem.dictLabel
      this.getList()
    },
    /* END */

    /* 点击列表内的项目后触发 */
    handleItemClick(item) {
      let id = item.id
      this.$router.push({ name: 'schoolDetail', params: { id } })
    },
    /* END */
  },
}
</script>

<style lang="scss" scoped>
.content-container {
  .search-container {
    display: flex;
    align-items: center;
    padding: 1rem;
    margin-top: 25px;
    background-color: #f6f9ff;
    .search-box {
      width: 560px;
      ::v-deep .el-input-group__append {
        background-color: #409eff;
        cursor: pointer;
      }
      .search-btn {
        background-color: #409eff;
        color: #fff;
      }
    }
  }
  .content {
    width: 1200px;
    margin: auto;
    // overflow: hidden;

    .screen-container {
      background-color: #f6f9ff;
    }

    .info-list {
      // display: flex;
      // flex-flow: row wrap;
      // justify-content: space-between;
      @apply grid grid-cols-3 gap-2;
      margin: 25px 0;
    }

    .info-list {
      .item {
        margin-bottom: 1.5rem;
        display: flex;
        width: 388px;
        min-height: 138px;
        padding: 20px;
        border-radius: 5px;
        border: solid 1px #efefef;
        background-color: #fff;
        transition: 300ms ease all;
        cursor: pointer;

        .left {
          min-width: 122px;
          height: 100%;
          .img-box {
            width: 90px;
            height: 90px;

            .el-image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .right {
          .title {
            font-size: 18px;
            font-weight: bold;
            padding-bottom: 1rem;
          }
          .sub {
            padding-bottom: 0.5rem;
            .label {
              padding-right: 10px;
              color: #909399;
            }
          }
        }
      }
    }
  }
  .pagination-container {
    height: 5rem;
    line-height: 5rem;
  }
}
</style>
